<template>
  <div class="container">
    <div class="main-area">
      <div>
        <p class="login-head">智慧社区后台登录</p>
      </div>
      <LoginForm></LoginForm>
    </div>
  </div>
</template>

<script>

import LoginForm from '@/components/LoginForm.vue'

export default {
  components: {
    LoginForm
  },
  data () {
    return {}
  },
  beforeCreate: function () {
    document.getElementsByTagName('body')[0].className = 'active'
  },

  beforeDestroy: function () {
    document.body.removeAttribute('class', 'active')
  }

}
</script>

<style lang="stylus">
  .active
    background: url(../assets/backgroud_login.jpg) center no-repeat
    /* 是图片自适应大小 */
    background-attachment: fixed
    background-size: cover
  .container
    text-align: center
    .main-area
      width: 430px
      height: 490px
      margin: 10% auto
      background: rgba(255, 255, 255, 0.5)
      .login-head
        text-align: center
        /*height: 69px*/
        font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif
        font-size: 26px
        line-height 80px
</style>
